<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>float layout demo</title>
		<style type="text/css">
			html,body{
				margin:0px;
				height: 100%;
				overflow: hidden;
			}
			header,nav,section,footer{
				border:1px solid #ccc;
			}
			header{
				height: 80px;
			}
			nav{
				float:left;
				width:220px;
				margin:0px 2px 2px 2px;
			}
			section{
				margin:2px 2px 2px 228px;
			}
			footer{
				height: 40px;
			}
		</style>
		<script type="text/javascript">
			function setHeight(){
				var screenHeight=document.body.offsetHeight;
				var moduleHeight=screenHeight-120;
				document.getElementById("mainModule").style.height=moduleHeight+"px";	
				document.getElementById("mainMenu").style.height=(moduleHeight-4)+"px";
				document.getElementById("mainPage").style.height=(moduleHeight-4)+"px";
			}
			function init(){
				setHeight();
				window.addEventListener("resize",setHeight,false);
			}
			window.addEventListener("load",init,false);
		</script>
	</head>
	<body>
		<header>top</header>
		<article id="mainModule">
			<nav id="mainMenu">菜单</nav>
			<section id="mainPage">主页面</section>
		</article>
		<footer>info</footer>
	</body>
</html>
